<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="<%=request.getContextPath() %>/styles/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="css/text"/>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/jquery-ui-calendar.min.js"></script>
<script type="text/javascript">
var buttonTemp;
var pageTemp;
var maxResult;
var pageTemp;
var maxPage = 10;
var pagedPage=false;
$(document).ready(function() {
		goToPage(1,null);
		});

//Max Page = 10
function goToPage(page, button) {
	pageTemp = page;
	var first;
	if(page !=null){
		first = (page - 1) * maxPage;
	}else{
		first = (pageTemp - 1)* maxPage;
	}
	$.getJSON("<%=request.getContextPath()%>/service/holiday/all/0/20", {}, function(data) {
		if(data.success){
		var datas=data.data;
		console.info("ngecek data");
		maxResult = data.resultSize;
		console.info(data);
		var arr = new Array();
		$("table.table tbody tr:not(#header)").fadeOut(function(){
			$(this).hide();
		});
		$("table.table tbody tr:not(#header)").promise().done(function(){
		var i=0;
		if(datas.length>0){
			$.each(datas,function(index,value){
			console.info("do something");
			console.info(++i);
			var tanggal=new Date(value.tanggal);
			if((index+1)%2==0){
			arr.push("<tr class='even'><td><input type='checkbox' name='id' value='"+value.id+"'/></td><td>"+tanggal.getDate()+"-"+(tanggal.getMonth()+1)+"-"+tanggal.getFullYear()+"</td><td>"+value.description+"</td><td><a onclick='remove(this);return false;' id='delete' href='<%=request.getContextPath()%>/service/holiday/delete/"+value.id+"'>delete</a>|<a href='<%=request.getContextPath()%>/admin/holiday/update/"+value.id+"'>update</a></td></tr>");
			}else{
			arr.push("<tr class='odd'> <td><input type='checkbox' name='id' value='"+value.id+"'/></td><td>"+tanggal.getDate()+"-"+(tanggal.getMonth()+1)+"-"+tanggal.getFullYear()+"</td><td>"+value.description+"</td><td><a onclick='remove(this);return false;' id='delete' href='<%=request.getContextPath()%>/service/holiday/delete/"+value.id+"'>delete</a>|<a href='<%=request.getContextPath()%>/admin/holiday/update/"+value.id+"'>update</a></td></tr>");
			}
		});
		}else{
			arr.push("<tr><td colspan='6'>Result = 0</td></tr>");
		}
		console.info("loading");
		$("table.table tbody tr:not(#header)").remove();
		$("table.table tbody tr#header").fadeIn().after($(arr.join()));
		
		console.info("waiting");
		if(!pagedPage){
			showPaginationNum(maxResult);
		}
		});
		}else{
			showErrorMessage(data.error);
		}
	});
};

function showPaginationNum(resultNumber){
	if(resultNumber >0){
		var pageNumbering="";
		var page = resultNumber / maxPage;
		page = Math.floor(page);
		if((resultNumber % maxPage)>0){
			page+=1;
		}
		
		for(i=1;i<=page;i++){
			pageNumbering+="<a href='#'>1</a>";
		}
		
		$(".pagination").append(pageNumbering);
		pagedPage=true;
		
		$(".pagination a").click(
				function() {
					console.info($(this));
					if (buttonTemp != null) {
						buttonTemp.replaceWith("<a href=#>"
								+ buttonTemp.text() + "</a>");
					}
					buttonTemp = $("<span class='current'>"
							+ $(this).text() + "</span>");
					$(this).replaceWith(buttonTemp);
					goToPage($(this).text(),this);
				});
	}
}
function remove(el){
	$.getJSON(el.href,{},function(data){
		console.info(data);
		if(data.success){
			showNoticeMessage("Data Successful Deleted");
			goToPage(pageTemp);
		}else{
			showErrorMessage(data.error);
		}
	});
	return false;
}
</script>
<title>List Holiday Event</title>
</head>
<body>
	<div class="secondary-navigation">
		<ul class="wat-cf">
			<li class="first"><a href="/admin/holidays/">Add</a></li>
			<li class="active"><a href="/admin/holidays/list">List</a></li>
		</ul>
	</div>
	<div class="block" id="block-form">
		<div class="content">
		<div class="flash"></div>
			<h2 class="title">List File Storage</h2>
			<div class="inner">
				<table class="table">
					<tr id="header">
						<th><input type="checkbox" /></th>
						<th>Tanggal</th>
						<th>Deskripsi</th>
						<th>Command</th>
					</tr>
					<tr><td colspan="6">No Data Loaded</td></tr>
				</table>
				<div class="actions-bar wat-cf">
					<div class="actions">
						<button class="button" type="submit">
							<img src="/images/icons/cross.png" alt="Delete"> Delete
						</button>
					</div>
					<div class="pagination">
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>